<template>

    <main role="main" class="main-container" ref="ProblemPageContainer" >
        <div class="problem-page-head" id="problem-page-header">


            <el-row>
                <el-col :span="10">


                    <el-tabs v-model="activeTabName" type="card" @tab-click="handleTabClick">
                        <el-tab-pane label="试题描述" name="problemDescriptionTab"></el-tab-pane>
                        <el-tab-pane label="提交记录" name="submitRecordTab"></el-tab-pane>
                    </el-tabs>
                </el-col>

                <el-col :span="4">
                    <el-select style="padding-top: 5px; padding-left: 5px"
                               placeholder="语言"
                               v-model="language"
                               @change="setHighlight()"
                    >
                      <el-option
                          v-for="item in languages"
                          :key="item.key"
                          :label="item.key"
                          :value="item.value">
                      </el-option>
                    </el-select>
                </el-col>

                <el-col :span="8">

                </el-col>

                <el-col :span="2">
                    <el-icon style="margin-top: 20px;" color="#ffc107" @click="tipDialogVisible = true"><InfoFilled /></el-icon>
                </el-col>


            </el-row>
        </div>

        <el-dialog v-model="tipDialogVisible" title="编程训练系统使用说明" width="50%" center>

            <PerfectScrollbar>
                <v-md-preview :text="INSTRUCTIONS" style="height: calc(50vh)"></v-md-preview>
            </PerfectScrollbar>

            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="tipDialogVisible = false"
                >Confirm</el-button
                >
              </span>
            </template>
        </el-dialog>

        <div class="problem-description-code-container" >

          <el-row>
            <el-col :span="10" class="problem-description">
              <perfect-scrollbar class="problemDetailTab">
                <div v-if="activeTabName == 'problemDescriptionTab'">
                  <v-md-preview :text="text"  preview-class="vuepress-markdown-body"></v-md-preview>
                </div>
                <div v-if="activeTabName == 'submitRecordTab'" style="margin: 10px">
                  <el-skeleton :loading="submissionResultLoading" :rows="5" animated
                               v-if="submitTrigger === true">
                    <template #default>

                      <el-card style="display: flex;justify-content: space-between">
                        <el-container>
                          <el-aside width="100" style="position: relative">
                            <!--                                              :sub-title="currentSubmissionResult.judgeResult.judgeResultName"-->
                            <el-result
                                icon="success"
                                v-if="currentSubmissionResult.submissionJudgeResult === SUBMISSION_RESULT.AC.key"
                                title="执行结果"
                                :sub-title ="result.ac"

                            >
                            </el-result>
                            <el-result
                                icon="error"
                                v-if="currentSubmissionResult.submissionJudgeResult  === SUBMISSION_RESULT.WA.key
                                                        || currentSubmissionResult.submissionJudgeResult === SUBMISSION_RESULT.CE.key"
                                title="执行结果"
                                :sub-title ="result.wr"
                            >
                            </el-result>
                            <el-result
                                icon="warning"
                                v-if="currentSubmissionResult.submissionJudgeResult !== SUBMISSION_RESULT.AC.key &&
                                                        currentSubmissionResult.submissionJudgeResult !== SUBMISSION_RESULT.WA.key &&
                                                        currentSubmissionResult.submissionJudgeResult !== SUBMISSION_RESULT.CE.key"
                                title="执行结果"
                                :sub-title ="result.ce"
                            >

                            </el-result>
                          </el-aside>
                          <el-main>
                            <div>
                              <br>
                              <el-row>
                                <span>使用语言&nbsp;:&nbsp;</span>
                                <span style="font-weight: bold">{{currentSubmissionResult.languageName}}</span>
                              </el-row>
                              <br>
                              <el-row>
                                <span>得分&nbsp;:&nbsp;</span>
                                <span style="font-weight: bold">{{currentSubmissionResult.submissionJudgeScore}}</span>
                              </el-row>
                              <br>
                              <el-row>
                                <span>执行用时&nbsp;:&nbsp;</span>
                                <span style="font-weight: bold">{{currentSubmissionResult.submissionUsedTime}} ms</span>
                              </el-row>
                              <br>
                              <el-row>
                                <span>内存消耗&nbsp;:&nbsp;</span>
                                <span style="font-weight: bold">{{currentSubmissionResult.submissionUsedMemory}} kb</span>
                              </el-row>
                            </div>

                          </el-main>
                        </el-container>

                      </el-card>

                      <el-collapse accordion style="margin-left: 5px">
                        <el-collapse-item title="显示详情">
                          <el-row>
                            <v-md-preview :text="currentSubmissionResult.submissionJudgeLog"></v-md-preview>
                          </el-row>

                        </el-collapse-item>
                        <el-collapse-item title="显示提交代码">
                          <v-md-preview :text="displayCurrentSubmissionCode"></v-md-preview>
                        </el-collapse-item>
                      </el-collapse>

                    </template>
                  </el-skeleton>

                  <table class="table table-hover">
                    <thead>
                    <tr>
                      <th>提交结果</th>
                      <th>执行用时</th>
                      <th>内存消耗</th>
                      <th>语言</th>
                      <th>提交时间</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="(submitResult, i) in submitRecord" v-bind:key="i" @click="openSubmissionDetail(submitResult)">
                      <td v-bind:class="{'success' : submitResult.submissionJudgeResult  === SUBMISSION_RESULT.AC.key,
                                        'danger' : (submitResult.submissionJudgeResult  === SUBMISSION_RESULT.CE.key || submitResult.submissionJudgeResult  === SUBMISSION_RESULT.WA.key),
                                        'warning' : (submitResult.submissionJudgeResult  !== SUBMISSION_RESULT.CE.key && submitResult.submissionJudgeResult  !== SUBMISSION_RESULT.AC.key
                                        && submitResult.submissionJudgeResult  !== SUBMISSION_RESULT.WA.key)
                                     }"
                      >{{submitResult.submissionJudgeResult }}</td>
                      <td>{{submitResult.submissionUsedTime}}</td>
                      <td>{{submitResult.submissionUsedMemory}}</td>
                      <td>
                        <button
                            v-bind:class="{
                                            'badge badge-pill badge-success' : submitResult.languageName === TRAINING_LANGUAGES.Java.key,
                                            'badge badge-pill badge-info' : submitResult.languageName === TRAINING_LANGUAGES.Python.key,
                                            'badge badge-pill badge-warning' : submitResult.languageName === TRAINING_LANGUAGES.CPlus.key,
                                            'badge badge-pill badge-secondary' : submitResult.languageName === TRAINING_LANGUAGES.RUBY.key,
                                            'badge badge-pill badge-primary' : submitResult.languageName === TRAINING_LANGUAGES.PASCAL.key
                                            || submitResult.languageName === TRAINING_LANGUAGES.C.key
                                            }"
                        >
                          {{submitResult.languageName}}
                        </button>
                      </td>
                      <td>{{formatData(submitResult.submissionSubmitTime)}}</td>
                    </tr>
                    </tbody>
                  </table>


                  <div class="block">
                    <el-pagination
                        background
                        page-size="10"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="50">
                    </el-pagination>
                  </div>
                </div>
              </perfect-scrollbar>
            </el-col>

            <el-col :span="14">
              <div class="problem-code-container">
                <div class="problem-code">
                  <codeEditor
                      v-model:value="code"
                      :scene="type"
                      :language-mode="languageMode"
                      ref="codeMirrorEditor"
                  ></codeEditor>

                </div>
              </div>
            </el-col>

          </el-row>


        </div>

        <div class="problem-description-code-footer">
            <el-row>
                <el-col :span="6">
                    <el-button style="margin-left: 16px" @click="getAllProblems(true)">
                        题目列表
                    </el-button>
                    <el-drawer
                            v-model="drawer"
                            title="题目列表"
                            :direction="direction"
                            :with-header="false"
                            :size="400"
                    >
                        <div style="display: flex; justify-content: center">
                            <perfect-scrollbar>

                                <el-table


                                        :data="problems"
                                        :height="winHeight - 56"

                                        stripe
                                        style="width: 100%"

                                        @row-click="problemClick"

                                >
                                    <el-table-column prop="problemId" label="ID" width="60"></el-table-column>
                                    <el-table-column prop="problemName" label="试题名称" width="220"></el-table-column>
                                    <el-table-column  label="难度" width="80">
                                        <template #default="scope" >
                  <span v-bind:class="{'error' :  scope.row.problemTags === PROBLEM_TAG_SLUGS[1].value,
                                        'danger' : scope.row.problemTags === PROBLEM_TAG_SLUGS[2].value,
                                        'warning' : scope.row.problemTags === PROBLEM_TAG_SLUGS[3].value,
                                        'success' : scope.row.problemTags === PROBLEM_TAG_SLUGS[4].value,
                                     }">
                    {{scope.row.problemTags}}
                  </span>
                                        </template>

                                    </el-table-column>


                                </el-table>
                            </perfect-scrollbar>
                        </div>

                    </el-drawer>
                </el-col>
                <el-col :span="2">
                    <el-button @click="viewPreviousProblem()">
                        上一题
                    </el-button>
                </el-col>
                <el-col :span="2">

                    <el-button @click="viewNextProblem()">
                        下一题
                    </el-button>
                </el-col>
                <el-col :span="10">

                </el-col>

                <el-col :span="2">

                </el-col>

                <el-col :span="2" style="text-align: right">
                    <el-button type="success" style="margin-right: 6px" @click="submitCode()"
                               v-bind:disabled="submitDisabled === true">
                        提交代码
                    </el-button>
                </el-col>

            </el-row>
        </div>




        <el-dialog v-model="viewSubmissionDetail" title="提交详情" width="50%" center>

            <PerfectScrollbar>
                <v-md-preview :text="selectSubmissionResult" style="height: calc(60vh)" preview-class="vuepress-markdown-body"></v-md-preview>
            </PerfectScrollbar>

            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="viewSubmissionDetail = false">
                    Confirm
                </el-button>
              </span>
            </template>
        </el-dialog>



    </main>


</template>

<script>

    import CodeEditor from "./codeEditor.vue"
    import axios from 'axios'
    import API from '../api/questionManager'
    export default {

        name: 'problem',

        components: {CodeEditor},


        data: function () {
            return {
                tipDialogVisible: false,
                problemListLoading: false,
                viewSubmissionDetail: false,
                questionCount: 0,
                currentPage:1,
                pageSize:10,
                selectSubmissionResult: {},
                drawer: false,
                direction: "ltr",
                TRAINING_LANGUAGES: TRAINING_LANGUAGES,
                languageMode: "text/x-csrc",
                language: TRAINING_LANGUAGES.C.value,
                languages: [
                    TRAINING_LANGUAGES.C,
                    TRAINING_LANGUAGES.CPlus,
                    TRAINING_LANGUAGES.Java,
                    // TRAINING_LANGUAGES.PASCAL,
                    TRAINING_LANGUAGES.Python,
                    // TRAINING_LANGUAGES.RUBY
                ],
                LANGUAGE_CODE_TEMPLATE: LANGUAGE_CODE_TEMPLATE,

                preferLanguageId: 1,
                result:{
                  ac:'通过',
                  wr:'错误',
                  ce:'超时',
                },
                code: '',
                submitRecord: [],
                type: 'add',
                activeTabName: 'problemDescriptionTab',
                currentProblem: {},
                text: "Initialize Failed...",
                problems: [],
                markdownHeight: "600px",
                codeEditorHeight: 880,
                problemPageMainHeight: '1000px',
                winHeight: 1000,
                nextProblem: {},
                previousProblem: {},
                submitDisabled: false,
                getSubmissionResultTimer: "",
                submissionResultLoading: true,
                currentSubmissionResult: {},
                displayCurrentSubmissionCode: '',
                submitTrigger: false,
                SUBMISSION_RESULT: SUBMISSION_RESULT,
                querySubmissionResultCount: 0,
                currentSubmissionId: undefined,
                INSTRUCTIONS: INSTRUCTIONS,
                PROBLEM_TAG_SLUGS: PROBLEM_TAG_SLUGS
            }
        },


        mounted() {
          // let detail ={}
          let idParam = {}
          idParam.id = 1001
          // detail.id = this.$route.query.pid
          this.questionCount = this.$route.query.questionCount
          // let token = localStorage.getItem('token')
          // API.questionDetail(detail,token).then(res=>{
          //   this.currentProblem = res.data.content
          //   LocalStorage.set(CURRENT_PROBLEM,this.currentProblem)
          // }).then(res=>{
          //   this.problemFormatToMarkdown();
          // }).catch(e=>{
          //   console.log(e)
          // })

          // this.getSubmissionResult()
          this.problemFormatToMarkdown();
          this.computeHeight();

            this.getAllProblems(false);
            this.getSubmissionRecord();
            window.onresize=function(){
                console.log("网页窗口变化了")
            }
            this.initCodeTemplate();
            //this.setHighlight()
        },

        computed: {},

        methods: {

            initCodeTemplate() {
                // let loginMember = Tool.getLoginMember();
                // if(loginMember.userName == undefined || loginMember.userName == null) {
                //     this.$router.push({path: '/home'});
                // }
                // this.preferLanguageId = loginMember.preferLanguageId;
                // this.language = this.languages[this.preferLanguageId - 1].value;
            },

            computeHeight() {

                this.currentProblem = LocalStorage.get(CURRENT_PROBLEM);
                this.problemPageMainHeight = (window.innerHeight - 56) + 'px';
                this.codeEditorHeight = (window.innerHeight - 56 - 56 - 70);
                this.winHeight = window.innerHeight;
            },

            openSubmissionDetail(submitResult) {
                this.viewSubmissionDetail = true;

                let previewSubmissionResult = "### "

                previewSubmissionResult += (submitResult.submissionJudgeResult === SUBMISSION_RESULT.AC.key ? "✔" : "❌") + "提交结果 " + this.result.ac + "\n"

                previewSubmissionResult += "### 执行用时 " + submitResult.submissionUsedTime + "ms\n"

                previewSubmissionResult += "### 内存消耗 " + submitResult.submissionUsedMemory + "kb\n"

                previewSubmissionResult += "### 使用语言 " + submitResult.languageName + "\n"

                previewSubmissionResult += "### 提交时间 " + this.formatData(submitResult.submissionSubmitTime) + "\n"

                previewSubmissionResult += "### 提交的代码\n"

                previewSubmissionResult +=
                    "```" + "\n" +
                    submitResult.submissionCode + "\n" +
                    "```"
                + "\n\n"

                previewSubmissionResult += "### 评测日志\n" + submitResult.submissionJudgeLog;

                this.selectSubmissionResult = previewSubmissionResult;
            },

            //查询题目列表
            getAllProblems(isClick) {
                let _this = this;
                if (isClick) {
                    _this.drawer = true;
                }
                _this.problemListLoading = true;

              let param = {}
              param.size = this.questionCount
              param.current = 1
              let token = localStorage.getItem('token')
              API.questionList(param,token).then((res) => {
                    _this.problemListLoading = false;
                    if (res.data === 'Unauthorized' || res.data === 'Forbidden') {
                        _this.$router.push({path: '/home'});
                        return;
                    }
                    if (res.data.success) {
                        _this.problems = res.data.content.records;
                        // _this.getPreviousAndNextProblem()

                    }
                }).catch((err) => {
                  console.log(22)
                    _this.problemListLoading = false;
                    console.log(err);
                });

            },

            handleTabClick(tab, event) {
                console.log(tab, event);
            },

            problemClick(row, column, event) {
                LocalStorage.set(CURRENT_PROBLEM, row);
                this.$router.go(0);
            },

            // getPreviousAndNextProblem() {
            //     if (this.currentProblem == {} || this.currentProblem == undefined) {
            //         return;
            //     }
            //
            //
            //     for (let i = 0; i < this.problems.length; i++) {
            //         if (this.problems[i].problemId === this.currentProblem.problemId) {
            //             this.previousProblem = this.problems[i - 1];
            //             this.nextProblem = this.problems[i + 1];
            //             console.log(this.previousProblem)
            //             break;
            //         }
            //     }
            // },


          viewPreviousProblem() {
            if (this.previousProblem === {} || this.previousProblem == undefined) {
              this.$notify.warning("Already First Problem...");
              return;
            }
            this.code = "";
            let detail ={}
            detail.id = this.currentProblem.problemId-1
            let token = localStorage.getItem('token')
            API.questionDetail(detail,token).then(res=>{
              LocalStorage.set(CURRENT_PROBLEM,res.data.content)
            }).then(res=>{
              this.$router.go(0);
            }).catch(e=>{
              console.log(e)
            })

            // this.code = "";
            // LocalStorage.set(CURRENT_PROBLEM, this.previousProblem);
            // this.$router.go(0);
          },

          viewNextProblem() {
            if (this.nextProblem === {} || this.nextProblem == undefined) {
              this.$notify.warning("Already Last Problem...");
              return;
            }
            this.code = "";
            let detail ={}
            detail.id = this.currentProblem.problemId+1
            let token = localStorage.getItem('token')
            API.questionDetail(detail,token).then(res=>{
              LocalStorage.set(CURRENT_PROBLEM,res.data.content)
            }).then(res=>{
              this.$router.go(0);
            }).catch(e=>{
              console.log(e)
            })

            // this.code = "";
            // LocalStorage.set(CURRENT_PROBLEM, this.nextProblem);
            // this.$router.go(0);
            // console.log(this.problems.length)
          },

            problemFormatToMarkdown() {

                let currentProblem = LocalStorage.get(CURRENT_PROBLEM)
                if (currentProblem === undefined || currentProblem == "") {
                    return;
                }
                this.currentProblem = eval(currentProblem);
                let timeLimit = ''
                let memoryLimit = ''
                this.currentProblem.languageList.forEach(e=>{
                  timeLimit+=e.languageName+'：'+e.timeLimit+" ms\n"
                  memoryLimit+= e.languageName+"："+e.memoryLimit+" kb\n"
                })
                let problemDescriptionString = [

                    "# 题目名称" + "\n\n" + "**" + this.currentProblem.problemId + "**" + " ：" + this.currentProblem.problemName + "(" + this.currentProblem.category + ")\n\n",
                    "## 题目描述" + "\n\n" + this.currentProblem.description + "\n\n",
                    "## 提示" + "\n\n" + this.currentProblem.hint + "\n\n",
                    "### 输入输出格式" + "\n\n",


                    "::: tip <font style='color: red'>输入格式</font>\n" +
                    this.currentProblem.inputFormat +
                    "\n:::\n",

                    "::: tip <font style='color: red'>输出格式</font>\n" +
                    this.currentProblem.outputFormat +
                    "\n:::\n",


                    "### 输入输出样例" + "\n\n",


                    "::: tip <font style='color: red'>输入</font>\n" +
                    this.currentProblem.sampleInput +
                    "\n:::\n",

                    "::: tip <font style='color: red'>输出</font>\n" +
                    this.currentProblem.sampleOutput +
                    "\n:::\n",


                    "::: tip  <font style='color: red'>时间限制</font>\n" +
                    timeLimit  +
                    "\n:::\n",

                    "::: tip <font style='color: red'>内存限制</font>\n" +
                    memoryLimit  +
                    "\n:::\n",
                ];


                this.text = problemDescriptionString.join("");

            },

            setHighlight() {
                if (this.language == TRAINING_LANGUAGES.C.value) {
                    this.languageMode = "text/x-csrc";

                }
                else if (this.language == TRAINING_LANGUAGES.CPlus.value) {
                    this.languageMode = "text/x-c++src";

                }
                else if (this.language == TRAINING_LANGUAGES.Java.value) {
                    this.languageMode = "text/x-java";

                }
                else if (this.language == TRAINING_LANGUAGES.PASCAL.value) {
                  this.languageMode = "text/x-pascal";

                }
                else if (this.language == TRAINING_LANGUAGES.Python.value) {
                  this.languageMode = "text/x-python";

                }
                else if (this.language == TRAINING_LANGUAGES.RUBY.value) {
                  this.languageMode = "text/x-ruby";

                }

            },

          submitCode() {
            let _this = this;
            let loginMember = Tool.getLoginMember();
            Confirm.show("Submit Code With Language " + this.language + " ?", function () {
              if (_this.code.length != 0) {
                //禁用提交
                _this.submitDisabled = true;
                //触发 el-skeleton
                _this.submitTrigger = true;
                //el-skeleton 处于 loading
                _this.submissionResultLoading = true;
                //清除查询次数
                _this.querySubmissionResultCount = 0;
                let form = {}
                let token = localStorage.getItem('token')
                // form.userName=loginMember.userName,
                // form.language=_this.language,
                form.languageId=_this.language
                form.code=_this.code
                form.problemId=_this.currentProblem.problemId
                form.sourceModule = 'voj'
                API.questionSubmit(form,token).then(res=>{
                  console.log(res.data)
                  if (res.data === 'Unauthorized' || res.data === 'Forbidden') {
                    _this.$notify.warning("登录认证失败");
                    _this.submitDisabled = false;
                    //触发 el-skeleton
                    _this.submitTrigger = false;
                    //el-skeleton 处于 loading
                    _this.submissionResultLoading = false;
                    _this.$router.push({path: '/home'});
                    return;
                  }
                  if (res.data.success) {
                    _this.activeTabName = "submitRecordTab";
                    _this.$notify({
                      title: '成功',
                      message: '提交成功，正在评分，请您稍等片刻！',
                      type: 'success',
                      duration: 3000
                    });

                    if (res.data.content!= undefined) {
                      _this.currentSubmissionId = res.data.content;
                      _this.getSubmissionResultTimer = setTimeout(_this.getSubmissionResult, 2000)
                    }
                    _this.submitDisabled = false;
                  }
                }).catch((err) => {
                  _this.submitDisabled = false;
                  _this.$notify({
                    title: '错误',
                    message: '提交失败',
                    type: 'error',
                    duration: 3000
                  });
                  console.log(err);
                }).catch(e=>{
                  console.log(e)
                })


              } else {
                _this.$notify({
                  title: '警告',
                  message: '内容不能为空，请提交代码！',
                  type: 'warning',
                  duration: 3000
                });
              }
            });


          },

            //querySubmissionResultCount 为 第几次调用 getSubmissionResult
          getSubmissionResult() {

            let idParam = {}
            idParam.id = this.currentProblem.problemId
            idParam.current = this.currentPage
            idParam.size = this.pageSize
            let token = localStorage.getItem('token')
            let _this = this;
            let submissionId = _this.currentSubmissionId
            let latestSubmissionResult = undefined;
            let loginMember = Tool.getLoginMember();
            API.getSubmissionResult(idParam,token).then((res) => {

              if (res.data === 'Unauthorized' || res.data === 'Forbidden') {
                _this.$router.push({path: '/home'});
                return;
              }
              if (res.data.success) {

                let submissionResults = res.data.content;
                if (submissionResults.length > 0) {
                  // latestSubmissionResult = submissionResults[submissionResults.length-1];
                  latestSubmissionResult = submissionResults[0];
                  //查询搭配评测结果不为PENDING

                  if (latestSubmissionResult != undefined) {
                    if (_this.querySubmissionResultCount++ >= 8 || (latestSubmissionResult.submissionId === submissionId && latestSubmissionResult.submissionJudgeResult !== undefined
                        && latestSubmissionResult.submissionJudgeResult !==null  && latestSubmissionResult.submissionJudgeResult !== SUBMISSION_RESULT.PD.key)) {
                      console.log(1)
                      console.log(5894)
                      console.log(latestSubmissionResult.submissionJudgeResult)
                      _this.submissionResultLoading = false;
                      this.submitRecord[0] = latestSubmissionResult
                      _this.currentSubmissionResult = latestSubmissionResult;
                      //格式化评测日志
                      _this.currentSubmissionResult.submissionJudgeLog = _this.currentSubmissionResult.submissionJudgeLog.replace(/\n/g, "<br>");
                      _this.displayCurrentSubmissionCode = "```\n" + _this.currentSubmissionResult.submissionCode + "\n```"
                      clearTimeout(_this.getSubmissionResultTimer);
                    } else {
                      console.log(2)
                      _this.getSubmissionResultTimer = setTimeout(_this.getSubmissionResult, 2000)
                      console.log(225)
                    }
                  }
                }
                _this.submitRecord = submissionResults;
              }

            }).catch((err) => {
              console.log(err)
            });
          },

          getSubmissionRecord() {
            let param = {}
            let token = localStorage.getItem('token')
            param.id = this.currentProblem.problemId
            param.current = this.currentPage
            param.size = this.pageSize
            Loading.show()
            API.getSubmissionResult(param,token).then((res) => {
              if (res.data === 'Unauthorized' || res.data === 'Forbidden') {
                this.$router.push({path: '/home'});
                return;
              }
              if (res.data.success) {
                let submissionResults = res.data.content;
                if (submissionResults.length > 0) {
                  this.submitRecord = submissionResults;
                }
                Loading.hide()
              }

            }).catch((err) => {
              console.log(err)
            });
          },
            formatData(cellValue){

                //把传过来的日期进行回炉重造一下，又创建了一个js的 Date对象，进行重新构造，转为String字符串
                //最终返回 s 就可以了
                var s =	new Date(cellValue).toLocaleString();
                return s;
            },

          handleCurrentChange(val) {
            this.currentPage = val
            this.getSubmissionRecord()

          }

        },

    }
</script>

<style scoped >

.red{
  color:#dd0000 !important;
}
font{
  color: red;
}
.main-container {
  height: calc(100vh - 56px);
  width: 100%;
}

.problem-page-head {
  height: 56px;
}


.problem-description-code-container {

  height: calc(100vh - 56px - 56px - 70px);
}

.problem-description {
  height: calc(100vh - 56px - 56px - 70px);
}

.problemDetailTab {
  height: calc(100vh - 56px - 56px - 70px);
}



.problem-description-code-footer {
  margin-top: 20px;
  height: 50px;

}

th {
  font-weight: normal;
}

.success {
  color: #67c23a;
}

.warning {
  color: #ffc107;
}

.danger {
  color: #EF4743;
}

.error {
  color: #ff0400;
}
</style>
